<!--
功能：首页界面展示,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：`2021/5/30` 0:13,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div>
    <div class="header" @mouseover="height=200" @mouseout="height=0">
      <div class="logo" @click="$router.push('/home/welcome')">学生宿舍管理系统</div>
      <div class="header-icons">
        <div class="name">{{user.name}}</div>
        <div class="header-portrait">
          <el-image :src="userUrl"
                    class="image"
                    fit="fill">
            <div slot="placeholder" class="image-slot">
              <span class="el-icon-refresh"></span>
            </div>
            <div slot="error" class="image-slot">
              <span class="el-icon-picture-outline-round"></span>
            </div>
          </el-image>
        </div>
        <div class="icon"
             v-for="i in icons"
             @click="handle(i)"
             :key="i.id">
          <i :class="i.icon"></i>
        </div>
      </div>
      <div class="header-keep" id="keep" :style="{height: height+'px'}">
        <span class="sp1" @click="per"><i class="el-icon-arrow-left"></i></span>
        <div class="card-box" :style="{marginLeft:left+'px'}">
          <div class="header-card" v-for="c in card" :key="c.id">
            <div class="card"
                 :style="{backgroundColor:c.bgc,color:c.color}"
                 @click="$router.push(c.path)">
              <span class="sp3"><i :class="c.icon"></i></span>
              <span class="sp4">{{ c.name }}</span>
            </div>
          </div>
        </div>
        <span class="sp2" @click="nex"><i class="el-icon-arrow-right"></i></span>
      </div>
    </div>
    <div class="main">
      <transition mode="out-in" name="t2">
        <router-view></router-view>
      </transition>
    </div>
    <div class="footer">
      <div class="footer-up">
        <span v-for="f in footerTxt"
              :key="f.id">{{ f.txt }}</span>
      </div>
      <div class="footer-down">
        学生宿舍管理系统
      </div>
    </div>
  </div>
</template>

<script>
import {confirm, message} from "@/utils/age";
import {mapState} from 'vuex'
import {delCookie} from '../utils/CookieUtils'
export default {
  data() {
    return {
      card: [{
        id: 1,
        url: '',
        path: '/home/userHome',
        name: '个人信息',
        bgc: '#444444',
        icon: 'el-icon-user',
        color: '#ffffff'
      }, {
        id: 2,
        url: '',
        path: '/home/change',
        name: '换寝申请',
        bgc: '#606469',
        icon: 'el-icon-user',
        color: '#CD6A1A'
      }, {
        id: 3,
        url: '',
        path: '/home/check',
        name: '寝室公告',
        bgc: '#E4E7ED',
        icon: 'el-icon-help',
        color: '#94CD1A'
      }, {
        id: 4,
        url: '',
        path: '/home/repair',
        name: '物品报修',
        // bgc: '#EE6B00',
        bgc: '#B0B0B0',
        icon: 'el-icon-help',
        color: '#000000'
      }, {
        id: 5,
        url: '',
        path: '/home/cost',
        name: '生活缴费',
        bgc: '#FFDEB0',
        icon: 'el-icon-help',
        color: '#3346D9'
      }, {
        id: 6,
        url: '',
        path: '/home/lost',
        name: '物品遗失',
        bgc: '#3B3021',
        icon: 'el-icon-help',
        color: '#fff'
      }],
      current: 0,
      left: 0,
      height: 0,
      is: false,
      footerTxt: [{
        id: 1,
        txt: '西南科技大学制'
      }, {
        id: 2,
        txt: '该制作仅仅用于学习交流'
      }, {
        id: 3,
        txt: '未经本人允许，严谨私自转发和商用'
      }, {
        id: 4,
        txt: '本人联系方式：18225348313 qq:1534677527'
      }],
      userUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      icons: [{
        id: 1,
        icon: 'el-icon-user',
        path: '/login'
      }, {
        id: 2,
        icon: 'el-icon-setting',
        path: '/home/setting'
      }, {
        id: 3,
        icon: 'el-icon-more-outline',
        path: '/home/outline'
      }]
    };
  },
  components: {},
  computed: {
    ...mapState(["user"])
  },
  mounted() {
    if (JSON.stringify(this.user) == '{}') {
      //  查询个人信息 保存于vuex之中
      this.$http.post('user/one').then(response => {
        if (response.data) {
          this.$store.commit("setUsr", response.data)
          message("success", "个人信息查询成功")
        } else {
          message("error", "个人信息查询失败")
        }
      }).catch(err => {
        message("error", "请求错误")
      })
    }
  },
  methods: {
    handle(i){
      switch (i.id){
        case 1:
          this.$router.push(i.path)
          break;
        case 2:
          //设置页面展示
          break;
        case 3:
          //退出登录
          confirm("确定要退出登录？是否继续！",this.userOut)
          break;
      }
    },
    userOut(){
      delCookie("token")
      this.$store.commit("setUsr",{})
    },
    nex() {
      //  下一个
      this.current++
      if (this.current > this.card.length - 4) {
        this.current = 0
      }
      this.left = -384 * this.current
    },
    per() {
      //  上一个
      this.current--
      if (this.current < 0) {
        this.current = this.card.length - 4
      }
      this.left = -384 * this.current
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>
.name{
  margin: 0 10px;
  font-weight: 700;
}
/*遮挡*/
.header-keep {
  width: 100%;
  position: absolute;
  top: 80px;
  z-index: 1000;
  left: 0;
  overflow: hidden;
  transition: all .5s;
  flex-wrap: nowrap;
  background-color: #F3F3F3;
}

.sp1,
.sp2 {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  font-size: 25px;
  color: #000;
  background-color: #ffffff;
}

.sp1 {
  left: 5px;
}

.sp2 {
  right: 0;
}

.card-box {
  height: 100%;
  width: 250%;
  transition: all .3s;
}

.header-card {
  float: left;
  display: inline;
  width: 384px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  height: 80%;
  width: 300px;
  border-radius: 10%;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}

.sp3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.sp3,
.sp4 {
  transition: all .3s;
}

.card:hover .sp3 {
  font-size: 40px;
  color: #db2f00;
}

.card:hover .sp4 {
  font-size: 20px;
}

/**/

/*尾部*/
.footer {
  /*transition: all 1s;*/
  width: 100%;
  height: 200px;
  background-color: #6E6E6E;
}

.footer-up {
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #000;
}

.footer-up span {
  margin: 3px 0;
}

.footer-down {
  height: 30%;
  font-size: 25px;
  text-align: center;
  line-height: 60px;
}


/**/
/*头部*/
.header {
  width: 100%;
  height: 80px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  background-color: #F3F3F3;
  padding: 0 50px;
  position: relative;
  box-sizing: border-box;
}

.logo {
  font-size: 25px;
  cursor: pointer;
}

.header-portrait {
  width: 40px;
  height: 40px;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}

.image-slot {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-icons {
  display: flex;
  /*width: 300px;*/
  height: 70%;
  justify-content: space-around;
  align-items: center;
}

.icon {
  cursor: pointer;
  font-size: 30px;
  margin: 0 10px;
}

/**/

.t2-enter,
.t2-leave-to {
  opacity: 0;
}

.t2-enter-active,
.t2-leave-active {
  transition: all 0.5s;
}
</style>
